<template>
  <div class="category_container" v-if="!data_show">
    <!-- 轮播图 -->
    <SwiperHome :list="bannerList"></SwiperHome>
    <div class="category_list_container" v-for=" item in categoryData?.data.categoryItemList" :key="item.category.id">
      <HomeGoodsList>
        <div style="width: 100%; font-size: 16px; color: #333;line-height: 30px; text-align: center;">
          {{ item.category.name }}
        </div>
        <div style="width: 100%; font-size: 12px; color: #999;line-height: 30px; text-align: center;">
          {{ item.category.frontName }}
        </div>
        <HomeGoodsItem v-for="goodsDetail in item.itemList" :key="goodsDetail.id" :goodsDetail="goodsDetail">
        </HomeGoodsItem>
      </HomeGoodsList>
    </div>
  </div>
  <!-- 数据请求时，显示遮罩层 -->
  <div class="mask_data_loading" v-else>
    <div class="loading_text">
      <van-loading size="24px">严选商品正在加载中...</van-loading>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { homeApi, type ThisCategoryModel } from '@/api/home';
import { ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
const Route = useRoute()
const router = useRouter()


/* 设置响应式数据 */
const bannerList = ref<{ picUrl: string }[]>([])
const categoryData = ref<ThisCategoryModel>()
const categoryId = ref('')
// 控制数据加载中的数据
const data_show = ref(false)

/* 生命周期钩子函数 */
onMounted(() => {
})
watch(() => Route.params.categoryId, () => {
  if (!Route.params.categoryId) {
    router.push('/home')
    return
  }
  categoryId.value = Route.params.categoryId as string
  getThisCategoryData()

}, { immediate: true, deep: true })

/* 发送请求的功能函数 */
// 获取当前分类的功能函数
async function getThisCategoryData() {
  try {
    data_show.value = true
    let result = await homeApi.getThisCategoryData(categoryId.value)
    categoryData.value = result
    bannerList.value = result.data.currentCategory.bannerList
    data_show.value = false
  } catch (error) {
    data_show.value = false
    console.error(error)
  }
}
</script>

<style scoped lang="less">
.category_container {
  background-color: #EEEEEE;

  .category_list_container {
    background-color: #fff;
    margin: 10px 0;
  }
}

// 数据加载中的遮罩层
.mask_data_loading {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: #f6f6f6;

  .loading_text {
    background: #fff;
    width: 180px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 5px;
    position: absolute;
    left: 26%;
    top: 44%;
  }
}
</style>